<template>
	<view class="Main">
		<view class="SearchDiv" v-if="type !='BuyActivity'">
			<!-- 			<view class="TopDiv">
				<uni-search-bar @confirm="search" v-model="searchValue" @input="input" placeholder="一键查商品"
					@clear="clear" cancelButton="none" style="width: 100%;">
				</uni-search-bar>
				<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false" placeholder="所有">
				</uni-data-select>
			</view> -->
			<uni-segmented-control :current="current" :values="items" :style-type="styleType"
				:active-color="activeColor" @clickItem="onClickItem" :defaultColor="defaultColor" />
		</view>


		<view class="content" v-if="type !='BuyActivity'">
			<view v-if="current === 0">
				<view class="Lists">
					<view class="ItemDiv" v-for="(item,index) in ShanPinList">
						<view class="ListItemTop">
							<view class="ListItemLeft">
								满额优惠-{{index+1}}
							</view>
							<view class="ListItemRight" @click="DeleChenJi(item)" v-if="ShanPinList.length !=1">
								删除层级
							</view>
						</view>
						<view class="List">
							<view class="PopItemDiv">
								<view class="FirstItemTitle">
									购买金额
								</view>
								<uni-easyinput v-model="item.Buy" type="digit" :clearable="false"
									@change="InputBuy"></uni-easyinput>
								<view class="PopItemDanWei FirstYuan">
									元
								</view>
							</view>
							<radio-group @change="radioChange(item,$event)" class="RadioGroup">
								<label class="radio">
									<view class="PopItemDiv">
										<radio value="折" checked="true" color="black" />
										<view class="PopItemTitle">
											折扣数
										</view>
										<uni-easyinput v-model="item.ZheKou" type="digit" :clearable="false">
										</uni-easyinput>
										<view class="PopItemDanWei">
											折
										</view>
									</view>
								</label>

								<label class="radio">
									<view class="PopItemDiv" style="border: 0;">
										<radio value="减" color="black" />
										<view class="PopItemTitle">
											减价数
										</view>
										<uni-easyinput v-model="item.JianJia" type="digit" :clearable="false">
										</uni-easyinput>
										<view class="PopItemDanWei">
											元
										</view>
									</view>

								</label>
							</radio-group>
						</view>
					</view>
					<view class="AddButton" @click="AddList">
						增加优惠层级
					</view>
				</view>
			</view>
			<view v-if="current === 1">
				<view class="Lists">
					<view class="ItemDiv" v-for="(item,index) in JianShuList">
						<view class="ListItemTop">
							<view class="ListItemLeft">
								满件优惠-{{index+1}}
							</view>
							<view class="ListItemRight" @click="DeleChenJi1(item)" v-if="JianShuList.length !=1">
								删除层级
							</view>
						</view>
						<view class="List">
							<view class="PopItemDiv">
								<view class="FirstItemTitle">
									购买件数
								</view>
								<uni-easyinput v-model="item.Buy" type="number" :clearable="false"
									@change="InputBuy"></uni-easyinput>
								<view class="PopItemDanWei FirstYuan">
									件
								</view>
							</view>
							<radio-group @change="radioChange1(item,$event)" class="RadioGroup">
								<label class="radio">
									<view class="PopItemDiv">
										<radio value="折" checked="true" color="black" />
										<view class="PopItemTitle">
											折扣数
										</view>
										<uni-easyinput v-model="item.ZheKou" type="digit" :clearable="false">
										</uni-easyinput>
										<view class="PopItemDanWei">
											折
										</view>
									</view>
								</label>

								<label class="radio">
									<view class="PopItemDiv" style="border: 0;">
										<radio value="减" color="black" />
										<view class="PopItemTitle">
											减价数
										</view>
										<uni-easyinput v-model="item.JianJia" type="digit" :clearable="false">
										</uni-easyinput>
										<view class="PopItemDanWei">
											元
										</view>
									</view>

								</label>
							</radio-group>
						</view>
					</view>
					<view class="AddButton" @click="AddList1">
						增加优惠层级
					</view>
				</view>
			</view>
		</view>

		<view class="content" v-else style="padding-top: 1vh;">
			<view class="Lists">
				<view class="ItemDiv" v-for="(item,index) in JianShuList">
					<view class="ListItemTop">
						<view class="ListItemLeft">
							第N件生效-{{index+1}}
						</view>
						<view class="ListItemRight" @click="DeleChenJi1(item)" v-if="JianShuList.length !=1">
							删除层级
						</view>
					</view>
					<view class="List">
						<view class="PopItemDiv">
							<view class="FirstItemTitle">
								第
							</view>
							<uni-easyinput v-model="item.Buy" type="number" :clearable="false"
								@change="InputBuy"></uni-easyinput>
							<view class="PopItemDanWei FirstYuan">
								件
							</view>
						</view>
						<radio-group @change="radioChange1(item,$event)" class="RadioGroup">
							<label class="radio">
								<view class="PopItemDiv">
									<radio value="折" checked="true" color="black" />
									<view class="PopItemTitle">
										折扣数
									</view>
									<uni-easyinput v-model="item.ZheKou" type="digit" :clearable="false">
									</uni-easyinput>
									<view class="PopItemDanWei">
										折
									</view>
								</view>
							</label>

							<label class="radio">
								<view class="PopItemDiv" style="border: 0;">
									<radio value="元" color="black" />
									<view class="PopItemTitle">
										价格数
									</view>
									<uni-easyinput v-model="item.JianJia" type="digit" :clearable="false">
									</uni-easyinput>
									<view class="PopItemDanWei">
										元
									</view>
								</view>

							</label>
						</radio-group>
					</view>
				</view>
				<view class="AddButton" @click="AddList1">
					增加优惠层级
				</view>
			</view>
		</view>

		<view class="OutLogin">
			<button type="default" class="OutLoginButton" @click="NextBuZhou">确定</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				colorIndex: 0,
				activeColor: 'rgba(54, 152, 252, 1)',
				current: 0,
				styleType: 'text',
				items: ['满额优惠', '满件优惠'],
				searchValue: '',
				defaultColor: '#9a9a9a',

				ShanPinList: [{
					Buy: '',
					ZheKou: '',
					JianJia: '',
					operationType: "折",
					thresholdUnit: "满额",
					id: 1,

				}],
				JianShuList: [{
					Buy: '',
					ZheKou: '',
					JianJia: '',
					thresholdUnit: "满件",
					operationType: "折",
					id: 1
				}],
				YiXuanList: [],

				range: [],
				storeId: '',
				value: '', // 类别
				Searchquery: {
					"pageNum": 1,
					"pageSize": 10,
				},
				type: ""
			}
		},
		mounted() {
			// this.queryGoodsByBarcode("test2(该字段不能重复)")
		},
		watch: {
			YiXuanList: {
				// 此处监听obj属性a值变量
				handler(item1, item2) {
					// item1为新值，item2为旧值
					if (this.YiXuanList.length == 0) {
						this.items[1] = '已选宝贝'
					} else {
						this.items[1] = '已选宝贝' + this.YiXuanList.length
					}
				},
				deep: true
			}
		},

		onLoad(option) {
			this.type = option.type
			if (option.type == 'BuyActivity') {
				this.JianShuList[0].thresholdUnit = "买设"
				this.current = 3
			}
			this.storeId = wx.getStorageSync("SelectMenDian")

		},
		methods: {
			InputBuy() {
				if (this.current == 0) {
					for (let i = 1; i < this.ShanPinList.length; i++) {
						if (this.ShanPinList[i].Buy < this.ShanPinList[i - 1].Buy) {
							uni.showToast({
								title: "优惠额数不能比上一层小",
								icon: 'none'
							});
						}
					}
					return;
				}

				for (let i = 1; i < this.JianShuList.length; i++) {
					if (this.JianShuList[i].Buy < this.JianShuList[i - 1].Buy) {
						uni.showToast({
							title: "优惠件数不能比上一层小",
							icon: 'none'
						});
					}

				}
			},
			DeleChenJi(item) {
				this.ShanPinList.forEach((item1, index) => {
					if (item.id == item1.id) {
						this.ShanPinList.splice(index, 1);
					}
				});
			},
			AddList(item) {
				let id = this.ShanPinList.length + 1

				if (this.ShanPinList[this.ShanPinList.length - 1].Buy == '') {
					uni.showToast({
						title: "优惠额数不能为空",
						icon: 'error'
					});
					return;
				}

				this.ShanPinList.push({
					Buy: '',
					ZheKou: '',
					JianJia: '',
					operationType: "折",
					thresholdUnit: "满额",
					id: id
				})
			},
			DeleChenJi1(item) {
				this.JianShuList.forEach((item1, index) => {
					if (item.id == item1.id) {
						this.JianShuList.splice(index, 1);
					}
				});
			},
			AddList1(item) {
				let id = this.JianShuList.length + 1
				if (this.JianShuList[this.JianShuList.length - 1].Buy == '') {
					uni.showToast({
						title: "优惠件数不能为空",
						icon: 'error'
					});
					return;
				}

				if (this.type == 'BuyActivity') {
					this.JianShuList.push({
						Buy: '',
						ZheKou: '',
						JianJia: '',
						operationType: "折",
						thresholdUnit: "买设",
						id: id
					})

				} else {
					this.JianShuList.push({
						Buy: '',
						ZheKou: '',
						JianJia: '',
						operationType: "折",
						thresholdUnit: "满件",
						id: id
					})
				}

			},
			radioChange(item, e) {
				console.log(item)
				console.log(e)
				item.operationType = e.detail.value

			},
			radioChange1(item, e) {
				console.log(item)
				item.operationType = e.detail.value
			},

			JoinButton(item) {

				this.ShanPinList.forEach((item1, index) => {
					if (item.barcode == item1.barcode) {
						this.ShanPinList.splice(index, 1);
						this.YiXuanList.push(item)
					}
				});
			},
			PushButton(item) {
				this.YiXuanList.forEach((item1, index) => {
					if (item.barcode == item1.barcode) {
						this.YiXuanList.splice(index, 1);
						this.ShanPinList.push(item)
					}
				});
			},
			input(res) {
				console.log(res)
				let _this = this

				this.Searchquery.name = res.value
				this.platformGoodsQuery(1)
			},
			NextBuZhou() {
				if (this.current == 0) {
					let list = []
					this.ShanPinList.forEach((item, index) => {
						if (item.operationType == "折" && item.Buy != '' && item.ZheKou != '') {
							item.ruleField = item.Buy + ":" + item.ZheKou / 10
							item.presentType = "满" + item.Buy + "元打" + item.ZheKou + "折"
							item.level = index + 1
							list.push(item)
						} else if (item.operationType == "减" && item.Buy != '' && item.JianJia != '') {
							item.ruleField = item.Buy + ":" + item.JianJia
							item.presentType = "满" + item.Buy + "元减" + item.JianJia + "元"
							item.level = index + 1
							list.push(item)
						}
					})
					console.log(list);

					uni.navigateBack(1)
					uni.$emit("SetyzsActivityRuleList", list)
					return;
				}
				else {
					let list = []
					this.JianShuList.forEach((item,index) => {
						console.log(item);

						if (item.operationType == "折" && item.Buy != '' && item.ZheKou != '') {
							item.ruleField = item.Buy + ":" + item.ZheKou / 10
							if (this.type != 'BuyActivity') {
								item.presentType = "满" + item.Buy + "件打" + item.ZheKou + "折"
							} else {
								item.presentType = "第" + item.Buy + "件" + item.ZheKou + "折"
							}
							item.level = index + 1
							list.push(item)
						} else if (item.operationType == "减" && item.Buy != '' && item.JianJia != '') {
							item.ruleField = item.Buy + ":" + item.JianJia
							if (this.type != 'BuyActivity') {
								item.presentType = "满" + item.Buy + "件减" + item.JianJia + "元"
							} else {
								item.presentType = "第" + item.Buy + "件" + item.JianJia + "元"
							}
							item.level = index + 1
							list.push(item)
						}

					})
					
					console.log(list);
					console.log(222, this.JianShuList);
					
					uni.navigateBack(1)
					uni.$emit("SetyzsActivityRuleList", list)
				}

				// uni.navigateBack(1)
			},
			change(e) {
				console.log("e:", e);
				this.value = e
				this.Searchquery.typeId = e
				this.platformGoodsQuery(1)
			},
			goodsTypeQuery() { // 类别
				this.$request(this.$api.goodsTypeQuery, null, "POST", false).then(res => {
					if (res.code == '0') {
						let b = {
							"value": '',
							"text": '所有'
						}
						this.range.push(b)
						res.data.forEach(i => {
							let a = {
								"value": i.id,
								"text": i.name
							}
							this.range.push(a)
						})

					} else {
						uni.showToast({
							title: "错误",
							icon: 'error'
						});
					}
				})
			},
			onClickItem(e) { // 切换
				if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
			platformGoodsQuery(num = 1) { // 商家商品
				let a = {
					storeId: this.storeId,
					name: this.searchValue,
					typeId: this.value
				}
				uni.showLoading({
					title: '加载中'
				});
				this.$request(this.$api.storeGoodsQuery, a, "POST", false).then(res => {
					uni.hideLoading();
					console.log(res)
					if (res.code == '0') {
						if (num == 1) { // 更新
							this.ShanPinList = []
							this.ShanPinList = res.data

						}
						if (num == 2) { // push
							res.data.forEach(i => {
								this.ShanPinList.push(i)
							});
						}
					} else {
						uni.showToast({
							title: "错误",
							icon: 'error'
						});
					}
				})
			},
			clear() {
				this.Searchquery.name = ''
				// this.platformGoodsQuery(1)
			},
		}
	}
</script>

<style>
	.segmented-control__text {
		font-size: 0.9rem !important;
		padding: 18rpx 40rpx !important;
	}

	.segmented-control {
		height: 80rpx !important;
	}

	.ItemDiv {
		margin-top: 13rpx;
	}

	.AddButton {
		width: 90vw;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: white;
		border-radius: 12vw;
		margin-top: 30rpx;
		color: #ad383c;
		font-size: 30rpx;
		border: 2rpx solid #ad383c;
	}

	.ListItemTop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 25rpx;
		font-size: 24rpx;
	}

	.ListItemRight {
		color: #669cd3
	}

	.Lists {
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.FirstItemTitle {
		display: flex;
		align-items: center;
		font-weight: 600;
		font-size: 30rpx;
	}

	.PopItemDanWei {
		color: #9b9b9b;
	}

	.FirstYuan {
		margin-left: 5vw;
	}

	.uni-easyinput {
		width: 62vw !important;
	}

	.RadioGroup {
		display: flex;
		align-items: center;
		flex-direction: column;
	}


	.input-padding {
		padding-left: 0 !important;
	}

	.uni-combox__input-plac {
		font-size: 24rpx !important;
	}

	.is-input-border {
		border: 0 !important;
		background: none !important;
		width: 67vw !important;
	}

	.PopItemTitle {
		display: flex;
		align-items: center;
		font-weight: 600;
		margin-left: 2vw;
	}

	.PopItemDiv {
		display: flex;
		align-items: center;

		color: black;
		font-size: 0.9rem;
		text-align: left;
		background-color: white;
		height: 107rpx;
		border-bottom: 2rpx solid #e8e8e8;
	}

	.Main {
		min-height: 100vh;
		background: #f3f3f5;
	}

	.segmented-control__item {
		background: white !important;
	}


	.List {
		height: 328rpx;
		background: white;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		border-radius: 10rpx;
		width: 95vw;
	}

	.ListRigihtKuCun {
		color: #cbcbcb;
		margin-top: 18rpx;
	}

	.OutLoginButton {
		width: 90%;
		height: 76rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		color: rgba(255, 255, 255, 1) !important;
		background-color: #007afc !important;
		border-radius: 10vw !important;
		font-size: 0.9rem;
		line-height: 150%;
		text-align: center;

	}


	.OutLogin {
		width: 100%;
		background: white;
		padding-bottom: 38rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		align-content: center;
		padding-top: 20rpx;
	}

	.ListRight {
		height: 158rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
	}

	.ListRigihtTop {
		font-size: 32rpx;
		font-weight: 600;
	}

	.listRightBottom {
		font-size: 36rpx;
		font-weight: 600;
		/* margin-top: 18rpx; */
		color: rgba(255, 87, 51, 1);
		margin-right: 68rpx;
	}

	.Xian {
		border-bottom: 2rpx solid #e8e8e8;
		width: 96vw;
		display: flex;
		height: 2rpx;
		margin-left: 2vw;
		justify-content: center;
	}

	.content {
		padding-top: 8vh;
		padding-bottom: 12vh;
	}

	.ItemBottomDiv {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.ItemTopDiv {
		display: flex;
		align-items: center;
		padding-bottom: 15rpx;
	}

	.JoinButton {
		width: 161rpx;
		border-radius: 5vw;
		border: 2rpx solid #b0585a;
		color: #b0585a !important;
		height: 57rpx;
		font-size: 22rpx;
		margin: 0;
		padding: 0;
		margin-right: 29rpx;
		margin-top: 20rpx;
		background: none !important;
	}


	.ListLeft image {
		width: 171rpx;
		height: 171rpx;
		margin-left: 39rpx;
		margin-right: 24rpx;

		color: rgba(255, 195, 0, 1);
		font-size: 36rpx;
		line-height: 150%;
		text-align: left;
		font-weight: bold;
	}

	.TopDiv {
		display: flex;
		align-items: center;
	}

	.uni-select {
		border: 0 !important;
	}

	.SearchDiv {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 6;
	}

	/* 	.uni-searchbar {
		width: auto !important;
	} */
	.uni-select {
		border: 0 !important;
		padding: 0 10rpx !important;
	}

	.uni-searchbar__box {

		display: flex !important;
		justify-content: flex-start !important;
	}

	.segmented-control {
		width: 100vw;
	}
</style>